<template lang="pug">
    .quick-pager
      .quick-pager-content
        span.quick-pager-info 共{{page.totalRows}}条,{{page.totalPages}}页
        ol
          li(@click="gotoPage(1, isFirstPage)", :class="isFirstPage ? 'is-valid-icon' : ''")
            i.iconfont.icon-diyiye
          li(@click="gotoPage(page.currentPage - 1, isFirstPage)", :class="isFirstPage ? 'is-valid-icon' : ''")
            i.iconfont.icon-shangyiye
          li(v-for="pager in getNumbers", @click="gotoPage(pager, isCurrentPage(pager))",
            :class="isCurrentPage(pager) ? 'is-current-page' : ''") {{pager}}
          li(@click="gotoPage(page.currentPage + 1, isLastPage)", :class="isLastPage ? 'is-valid-icon' : ''")
            i.iconfont.icon-xiayiye
          li(@click="gotoPage(page.totalPages, isLastPage)", :class="isLastPage ? 'is-valid-icon' : ''")
            i.iconfont.icon-zuihouyiye
      div(style="clear: both;")
</template>

<script>
export default {
  props: {
    page: {
      require: true
    }
  },
  computed: {
    getNumbers () {
      if (this.page.totalPages <= 5) {
        return this.page.totalPages
      } else {
        if (this.page.currentPage <= 3) {
          return 5
        } else {
          if (this.page.totalPages - this.page.currentPage <= 2) {
            return [this.page.totalPages - 4, this.page.totalPages - 3, this.page.totalPages - 2, this.page.totalPages - 1, this.page.totalPages]
          } else {
            return [this.page.totalPages - 2, this.page.totalPages - 1, this.page.totalPages, this.page.totalPages + 1, this.page.totalPages + 2]
          }
        }
      }
    },
    isFirstPage () {
      return this.page.currentPage === 1
    },
    isLastPage () {
      return this.page.currentPage === this.page.totalPages
    }
  },
  methods: {
    isCurrentPage (page) {
      return this.page.currentPage === page
    },
    gotoPage (toPage, tag) {
      if (tag) return
      let startIndex = ((toPage - 1) < 0 ? 0 : (toPage > this.page.totalPages ? this.page.totalPages - 1 : (toPage - 1))) * this.page.pageRows
      this.$emit('quickPager', {
        startIndex: startIndex,
        pageRows: this.page.pageRows,
        currentPage: toPage
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .quick-pager
    background-color #fff
    margin-right 15px
    margin-top 15px
  .quick-pager-content
    float right
    color #5e5e5e
    ol
      float left
      list-style none
      margin-top 0
      li
        float left
        cursor pointer
        height 23px
        line-height 23px
        padding 0 8px
        margin-left 5px
        text-align center
        i
          font-size 12px
          color #777777
      .is-valid-icon
        cursor not-allowed
      .is-current-page
        background-color #1587cd
        color #fff
  .quick-pager-info
    height 24px
    line-height 24px
    float left
    margin-right 15px
  .quick-pager-content .is-valid-icon i
    color #cdcdcd
</style>
